<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>product</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Vue库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Import jQuery -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../icons/element-icons.woff">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/normal.css">
</head>

<body>
    <div id="app">
        <div class="app-wrapper" :class="{'sidebar-hide':isActive}">
            <div class="sidebar-container" :span="4">
                <el-scrollbar max-height="1080px">
                    <el-menu mode="vertical" :show-timeout="100" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                        background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
                        <el-menu-item index="0">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                          </el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">
                              <i class="el-icon-s-goods"></i>
                              <span>商品</span>
                            </template>
                              <el-menu-item index="1-1">商品列表</el-menu-item>
                              <el-menu-item index="1-2">添加商品</el-menu-item>
                              <el-submenu index="1-3"><span slot="title">商品分类</span>
<!--                                <el-menu-item index="1-3-1">猫</el-menu-item>-->
<!--                                <el-menu-item index="1-3-2">狗</el-menu-item>-->
<!--                                <el-menu-item index="1-3-3">鱼</el-menu-item>-->
<!--                                <el-menu-item index="1-3-4">鸟</el-menu-item>-->
<!--                                <el-menu-item index="1-3-5">爬行类</el-menu-item>-->
                                  <a href="viewProductAttr?categoryId=CATS"> <el-menu-item index="1-3-1">猫</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=DOGS"><el-menu-item index="1-3-2">狗</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=FISH"><el-menu-item index="1-3-3">鱼</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=BIRDS"><el-menu-item index="1-3-4">鸟</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=REPTILES"><el-menu-item index="1-3-5">爬行类</el-menu-item></a>
                              </el-submenu>
                          </el-submenu>
                          <el-menu-item index="2">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">订单</span>
                          </el-menu-item>
                          <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">待开发</span>
                          </el-menu-item>
                          <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">管理</span>
                          </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="main-container" :span="20">
                  <el-menu class="navbar" mode="horizontal">
                    <div class="hamburger-container" :toggleClick="toggleSideBar" :isActive="opened">
                        <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
                          <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
                            p-id="1692"></path>
                          <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
                            p-id="1693"></path>
                          <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
                            p-id="1694"></path>
                        </svg>
                      </div>
                    <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
                      <div class="avatar-wrapper">
                        <img class="user-avatar" >
                        <i class="el-icon-caret-bottom"></i>
                      </div>
                      <el-dropdown-menu class="user-dropdown" slot="dropdown">
                        <a class="inlineBlock" to="/">
                          <el-dropdown-item command="home">
                            首页
                          </el-dropdown-item>
                        </a>
                        <el-dropdown-item divided>
                          <span @click="logout" style="display:block;">退出</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-menu>
                  <div class="app-container">
                    <el-card class="filter-container" shadow="never">
                      <div>
                        <i class="el-icon-search"></i>
                        <span>筛选搜索</span>
                        <el-button
                          style="float: right"
                          @click="handleSearchList()"
                          type="primary"
                          size="small">
                          查询结果
                        </el-button>
                        <el-button
                          style="float: right;margin-right: 15px"
                          @click="handleResetSearch()"
                          size="small">
                          重置
                        </el-button>
                      </div>
                      <div style="margin-top: 15px">
                        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                          <el-form-item label="输入搜索：">
                            <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="商品名称"></el-input>
                          </el-form-item>
                          <el-form-item label="商品货号：">
                            <el-input style="width: 203px" v-model="listQuery.productSn" placeholder="商品货号"></el-input>
                          </el-form-item>
                          <el-form-item label="商品分类：">
                            <el-cascader
                              clearable
                              v-model="selectProductCateValue"
                              :options="productCateOptions">
                            </el-cascader>
                          </el-form-item>
                        </el-form>
                      </div>
                    </el-card>
                    <el-card class="operate-container" shadow="never">
                      <i class="el-icon-tickets"></i>
                      <span>数据列表</span>
                      <el-button
                        class="btn-add"
                        @click="handleAddProduct()"
                        size="mini">
                        添加
                      </el-button>
                    </el-card>
                    <div class="table-container">
                      <el-table ref="productTable"
                                :data="list"
                                style="width: 100%"
                                @selection-change="handleSelectionChange"
                                v-loading="listLoading"
                                border>
                        <el-table-column type="selection" width="60" align="center"></el-table-column>
                        <el-table-column label="编号" width="100" align="center">
                          <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column label="商品图片" width="120" align="center">
                          <template slot-scope="scope"><img style="height: 80px" :src="scope.row.image"></template>
                        </el-table-column>
                        <el-table-column label="商品名称" align="center">
                          <template slot-scope="scope">
                            <h4> {{scope.row.productid}}</h4>
                            <p>{{scope.row.id}}</p>
                          </template>
                        </el-table-column>
                        <el-table-column label="价格" width="120" align="center">
                          <template slot-scope="scope">
                            <p>价格：￥{{scope.row.listprice}}</p>
                          </template>
                        </el-table-column>
                        <el-table-column label="库存" width="100" align="center">
                          <template slot-scope="scope">{{scope.row.inventory}}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                          <template slot-scope="scope">
                            <p style="margin: 12px 0;">
                              <el-button
                                size="mini"
                                @click="error">查看
                              </el-button>
                              <el-button
                                size="mini"
                                @click="error">编辑
                              </el-button>
                            </p>
                            <p style="margin: 12px 0;">
                              <el-button
                                size="mini"
                                @click="error">日志
                              </el-button>
                              <el-button
                                size="mini"
                                type="danger"
                                @click="error">删除
                              </el-button>
                            </p>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <div class="batch-operate-container">
                      <el-select
                        size="small"
                        v-model="operateType" placeholder="批量操作">
                        <el-option
                          v-for="item in operates"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                      <el-button
                        style="margin-left: 20px"
                        class="search-button"
                        @click="handleBatchOperate()"
                        type="primary"
                        size="small">
                        确定
                      </el-button>
                    </div>
                    <div class="pagination-container">
                      <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery.pageSize"
                        :page-sizes="[5,10,15]"
                        :current-page.sync="listQuery.pageNum"
                        :total="total">
                      </el-pagination>
                    </div>
                  </div>
            </div>
        </div>
    </div>

</body>
<script  src="../js/product.js"></script>
<script th:inline="javascript">
    let courseAvgs = [[${items}]]
    setList(courseAvgs);
    console.log(courseAvgs)
</script>

</html>